<script setup>
import { ref, reactive } from 'vue'
import { listDept } from '@/api/system/dept'
import { Search } from '@element-plus/icons-vue'
const { proxy } = getCurrentInstance()
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  // 是否禁用
  db: {
    type: Boolean,
    default: false
  },
  // 单据审核
  examine: {
    type: Boolean,
    default: false
  },
  // 批次到货
  planRelease: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  }
})

// 封装 方法 字典查询
const {
  quality_standard // 质量标准
} = proxy.useDict('quality_standard')

const emit = defineEmits(['cancel', 'submit'])

const ruleFormRef = ref(null)

const selection = ref([])
const deptOptions = ref([])

const TableData = ref([])

const supplierIsShow = ref(false)

// 新增字段
const ruleForm = reactive({
  actualUnitPrice: '', // 实际单价
  actualWeight: '', // 实际数量
  materialList: []
})

const rules = reactive({
  estimatedTime: [{ required: true, message: '请选择预计到货时间', trigger: 'change' }]
})

/**
 * 存储点击的哪一行数据
 */
const rowForm = reactive({})
if (props.data) {
  for (let key in props.data) {
    ruleForm[key] = props.data[key]
  }
  ruleForm.materialList = props.data.materialList
}

/**
 * 供应商弹窗
 * @param val
 */
const isSupplier = val => {
  rowForm.index = val.$index
  supplierIsShow.value = true
}

// 供应商选择
const preservation = val => {
  ruleForm.materialList[rowForm.index].supplierName = val.supplierName
  ruleForm.materialList[rowForm.index].supplierId = val.id
  supplierIsShow.value = false
}

// 提交
const submit = () => {
  return new Promise((resolve, reject) => {
    ruleFormRef.value.validate((valid, fields) => {
      if (!valid) {
        resolve(false)
        proxy.Mes('warning', '请填写完整')
        return
      }
      const isif = ruleForm.materialList.every(item => item.supplierName)
      if (!isif) {
        proxy.warningMsg('请选择供应商！')
        resolve(false)
        return
      }
      // 赋值
      resolve(ruleForm)
    })
  })
}

// 列表选中
const handleSelectionChange = selection => {
  selection.value = selection
}

// 文件
const uploadChange = url => {
  // console.log(url, '==========ruleForm.enclosureUrl')
  ruleForm.enclosureUrl = url
}

function handleAdd(row) {
  listDept().then(response => {
    deptOptions.value = proxy.handleTree(response.data, 'deptId')
  })
  if (row != undefined) {
    ruleForm.demandDept = row.deptId
  }
}
handleAdd()
defineExpose({ submit })
</script>

<template>
  <div class="app-container">
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      label-position="right"
      inline
      scroll-to-error
      label-width="120px"
    >
      <el-form-item label="预计到货时间" prop="estimatedTime">
        <template #default="scope">
          <el-date-picker
            v-model="ruleForm.estimatedTime"
            type="datetime"
            placeholder="请选择预计到货时间"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </template>
      </el-form-item>
    </el-form>

    <!-- 表格数据 -->
    <el-table
      v-loading="loading"
      stripe
      border
      :data="ruleForm.materialList"
      style="margin-top: 10px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" fixed="left" />
      <el-table-column label="序号" width="70" type="index" />
      <el-table-column label="物料编码" prop="materialCode" width="auto" />
      <el-table-column label="物料名称" prop="materialName" width="auto" />
      <el-table-column label="单位" prop="unitDict" width="auto" />
      <el-table-column label="下达数量" prop="lowerWeight" width="auto" />
      <el-table-column label="实际数量" width="120">
        <template #default="scope">
          <el-input v-model="scope.row.actualWeight" clearable></el-input>
        </template>
      </el-table-column>
      <el-table-column label="计划单价" prop="plannedUnitPrice" width="auto" />

      <el-table-column label="到货数量" width="120">
        <template #default="scope">
          <el-input
            type="number"
            oninput="if(value<=0)value=''"
            v-model="scope.row.quantityArrivalTimeWeight"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <el-table-column label="实际单价" width="120">
        <template #default="scope">
          <el-input
            type="number"
            oninput="if(value<=0)value=''"
            v-model="scope.row.actualUnitPrice"
            clearable
          ></el-input>
        </template>
      </el-table-column>
      <!-- <el-table-column label="预计到货时间" width="220">
        <template #default="scope">
          <el-date-picker
            v-model="scope.row.estimatedTime"
            type="datetime"
            placeholder="请选择预计到货时间"
            format="YYYY/MM/DD hh:mm:ss"
            value-format="YYYY-MM-DD hh:mm:ss"
          />
        </template>
      </el-table-column> -->
      <el-table-column label="供应商" width="220">
        <template #default="scope">
          <el-input clearable @click="isSupplier(scope)" v-model="scope.row.supplierName" />
        </template>
      </el-table-column>
    </el-table>
    <Supplier :is-show="supplierIsShow" @preservation="preservation" @cancel="supplierIsShow = false" />
  </div>
</template>

<style lang="scss" scoped>
.btn {
  margin-top: 20px;
}

.rk ::v-deep .el-form-item {
  width: 100% !important;
}
</style>
